<template>
	<div>
		<el-container>
		  <el-main>
		    <el-row>
		      <el-col :span="24">
		        <div class="grid-content bg-purple-dark">
		          <el-card class="user-top">
					  <el-avatar class="user-img" :size="100" :src="user.avatar"></el-avatar>
		            <!-- <img class="user-img" src="../assets/logo.png" width="100px" height="100px" /> -->
		            <div class="username">{{user.username}}</div>
		            <hr>
		
		            <div class="user-msg">
		              <div class="msg-center">
		                <h3>0</h3>
		                <span class="gray">访问数量</span>
		              </div>
		
		              <div class="msg-center">
		                <h3>0</h3>
		                <el-divider direction="vertical"></el-divider>
		                <span class="gray">文章数量</span>
		                <el-divider direction="vertical"></el-divider>
		              </div>
		
		              <div class="msg-center">
		                <h3>0</h3>
		                <span class="gray">粉丝数量</span>
		              </div>
		
		            </div>
		          </el-card>
		        </div>
		      </el-col>
		    </el-row>
		    <el-row :gutter="20">
		
		      <el-col :span="16">
		        <div class="grid-content bg-purple">
		          <el-card class="user-content">
		            <el-tabs v-model="activeName" @tab-click="handleClick">
		              <el-tab-pane label="最近" name="first">
		                <span slot="label"><i class="el-icon-pie-chart"></i> 最近 · 0</span>
		                <el-empty description="空空如也"></el-empty>
		              </el-tab-pane>
		              <el-tab-pane label="文章" name="second">
		                <span slot="label"><i class="el-icon-tickets"></i> 文章 · 0</span>
		                <el-empty description="暂无文章"></el-empty>
		              </el-tab-pane>
		              <el-tab-pane label="回复" name="third">
		                <span slot="label"><i class="el-icon-message"></i> 回复 · 0</span>
		                <el-empty description="暂无回复"></el-empty>
		              </el-tab-pane>
		              <el-tab-pane label="收藏" name="fourth">
		                <span slot="label"><i class="el-icon-collection"></i> 收藏 · 0</span>
		                <el-empty description="暂无收藏"></el-empty>
		              </el-tab-pane>
		              <el-tab-pane label="关注/订阅" name="five">
		                <span slot="label"><i class="el-icon-bell"></i> 关注/订阅</span>
		                <el-empty description="暂无关注"></el-empty>
		              </el-tab-pane>
		            </el-tabs>
		          </el-card>
		        </div>
		      </el-col>
		
		      <el-col :span="8">
		        <div class="grid-content bg-purple">
		
		          <el-card class="r-news">
		            <span><i class="el-icon-date"></i>{{user.createTime}}</span>
		            <router-link class="a-user" to="/setting"><el-button class="btn-r" type="info" round>修改资料</el-button></router-link>
		            <el-divider>
		              <h4><i class="el-icon-s-custom"></i> 个人资料</h4>
		            </el-divider>
		
		            <ul>
		              <li>UID:</li>
		              <span>{{user.id}}</span>
		            </ul>
		            <ul>
		              <li>性别:</li>
		              <span>{{sex}}</span>
		            </ul>
		
		
		          </el-card>
		
		          <el-card class="r-news">
		            <el-divider>
		              <h4><i class="el-icon-collection-tag"></i> 公告</h4>
		            </el-divider>
		            <el-input type="textarea" placeholder="编辑我的公告" v-model="textarea" maxlength="150" show-word-limit>
		            </el-input>
		          </el-card>
		
		        </div>
		      </el-col>
		
		    </el-row>
		  </el-main>
		
		</el-container>
	</div>
</template>

<script>
	export default{
		name: 'user',
		data() {
		  return {
		    sex:'男',
		    activeName: 'first',
		    text: '',
		    textarea: '',
			
			user:{
				id: '',
				username: '',
				avatar :'',
				createTime: ''
			},
			
		  };
		},
		methods: {
		  handleClick(tab, event) {
		    console.log(tab, event);
		  }	
		},
		
		created() {
		  if(this.$store.getters.getUser.username) {
			  this.user.id = this.$store.getters.getUser.id
		    this.user.username = this.$store.getters.getUser.username
		    this.user.avatar = this.$store.getters.getUser.avatar
			this.user.createTime = this.$store.getters.getUser.createTime    
		  }
		}
		
	}
</script>

<style scoped="">
	.a-user{
	  color: white;
	}
	/* 用户顶部信息 */
	.user-top {
	  text-align: center;
	  width: auto;
	}
	
	/* 图像 */
	.user-img {
	  border: wheat 5px solid;
	  background-color: white;
	  display: block;
	  margin: auto;
	  border-radius: 50%;
	}
	
	/* 用户名 */
	.username {
	  overflow: hidden;
	  font-size: 15px;
	  margin-top: 10px;
	  margin-bottom: 15px;
	}
	
	/* 用户信息 */
	.user-msg {
	  float: left;
	  position: relative;
	  left: 50%;
	  margin-bottom: 20px;
	}
	
	/* 信息剧中 */
	.msg-center {
	  padding: 10px;
	  float: left;
	  position: relative;
	  right: 50%;
	}
	
	
	/* 灰色 */
	.gray {
	  color: gray;
	}
	
	/* 用户内容 */
	.user-content {
	  width: auto;
	}
	
	/* 左边栏 */
	.r-news {
	  margin-bottom: 30px;
	  width: auto;
	}
	
	/* 个人信息表单 */
	.btn-r {
	  line-height: 1px;
	  height: 10px;
	  font-size: 10px;
	  float: right;
	}
	
	ul,
	li {
	  text-align: center;
	  margin-left: 5px;
	  margin-right: 5px;
	  margin-bottom: 10px;
	  float: left;
	  display: block;
	}
</style>